<template>
  <Layout desc="在组件内进行模板复用">
    <div class="mt-60 flex gap-5">
      <DefineTemplate #default="{ name, type, onClick }">
        <el-card class="mr-5">
          <el-button :type @click="onClick(name)">{{ name }}</el-button>
        </el-card>
      </DefineTemplate>

      <UseTemplate name="复用1" type="primary" :onClick="ElMessage.success" />
      <UseTemplate name="复用2" type="warning" :onClick="ElMessage.warning" />
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { createReuseTemplate } from '@/utils/createReuseTemplate'

const [DefineTemplate, UseTemplate] = createReuseTemplate()
</script>

<style scoped lang="scss"></style>
